<template>
  <a-modal
    :title="title"
    :width="1000"
    :visible="visible"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭">

    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :span="8">
            <a-form-item label="材料类型名称">
              <a-input placeholder="请输入材料类型名称" v-model="queryParam.materialTypeName"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="5">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <!-- table区域-begin -->
    <div style="height: 100%">
      <a-tabs default-active-key="1" :animated="false" @change="callback" style="height: 100%">
        <a-tab-pane tab="主要项目" key="1" forceRender >
          <a-table
            ref="table"
            size="middle"
            :scroll="{x:true}"
            bordered
            rowKey="id"
            :columns="columns"
            :dataSource="data"
            :pagination="false"
            :loading="loading"
            :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange,type:'radio'}"
            class="j-table-force-nowrap"
            @change="handleTableChange">
          </a-table>
        </a-tab-pane>
        <a-tab-pane tab="辅要项目" key="2" forceRender>
          <a-table
            ref="table"
            size="middle"
            :scroll="{x:true}"
            bordered
            rowKey="id"
            :columns="columns"
            :dataSource="data"
            :pagination="ipagination"
            :loading="loading"
            :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange,type:'radio'}"
            class="j-table-force-nowrap"
            @change="handleTableChange">
          </a-table>
        </a-tab-pane>
        <a-tab-pane tab="赠品项目" key="3" forceRender>
          <a-table
            ref="table"
            size="middle"
            :scroll="{x:true}"
            bordered
            rowKey="id"
            :columns="columns"
            :dataSource="data"
            :pagination="ipagination"
            :loading="loading"
            :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange,type:'radio'}"
            class="j-table-force-nowrap"
            @change="handleTableChange">
          </a-table>
        </a-tab-pane>
      </a-tabs>

      <!--<a-tabs default-active-key="1" @change="callback" style="height: 100%">
        <a-tab-pane v-for="item in tab " :key="item.key" :tab="item.title">
          <a-table
            ref="table"
            size="middle"
            :scroll="{x:true}"
            bordered
            rowKey="id"
            :columns="columns"
            :dataSource="data"
            :pagination="ipagination"
            :loading="loading"
            :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
            class="j-table-force-nowrap"
            @change="handleTableChange">

            <template slot="htmlSlot" slot-scope="text">
              <div v-html="text"></div>
            </template>
            <template slot="imgSlot" slot-scope="text,record">
              <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
              <img v-else :src="getImgView(text)" :preview="record.id" height="25px" alt="" style="max-width:80px;font-size: 12px;font-style: italic;"/>
            </template>
            <template slot="fileSlot" slot-scope="text">
              <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
              <a-button
                v-else
                :ghost="true"
                type="primary"
                icon="download"
                size="small"
                @click="downloadFile(text)">
                下载
              </a-button>
            </template>
            <span slot="action" slot-scope="text, record">
              <a @click="add(record)">新增</a>
              <a-divider type="vertical" />
              <a @click="handleEdit(record)">编辑</a>
              <a-divider type="vertical" />
              <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                <a>删除</a>
              </a-popconfirm>
            </span>
          </a-table>
        </a-tab-pane>
      </a-tabs>-->
    </div>

    <!-- table区域-begin -->
    <!--<div>
      <a-table
        size="small"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :scroll="{ y: 240 }"
        :rowSelection="{selectedRowKeys: selectedRowKeys,onSelectAll:onSelectAll,onSelect:onSelect,onChange: onSelectChange,type:'radio'}"
        @change="handleTableChange">
      </a-table>
    </div>-->
    <!-- table区域-end -->
  </a-modal>
</template>

<script>
  import { mixinDevice } from '@/utils/mixin'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import { getAction } from '@/api/manage'

  export default {
    name: "chooseMaterialTypeModal",
    mixins:[JeecgListMixin, mixinDevice],
    data() {
      return {
        tab: [
          {
            key: 1,
            title: '主要项目'
          },{
            key: 2,
            title: '辅要项目'
          },{
            key: 3,
            title: '赠品项目'
          }
        ],
        model: {},
        title: "",
        visible: false,
        placement: 'right',
        description: '',
        // 查询条件
        queryParam: {},
        //职务条件
        post: '',
        // 表头
        columns: [
          {
            title: '#',
            dataIndex: '',
            key:'rowIndex',
            width:60,
            align:"center",
          },
          {
            title:'材料类型名称',
            align:"center",
            dataIndex: 'materialTypeName'
          },
          {
            title:'种类',
            align:"center",
            dataIndex: 'materialTypeClassifyName'
          },
          {
            title:'创建人',
            align:"center",
            dataIndex: 'createBy'
          }
        ],
        //数据集
        data: [],
        loading: false,
        selectedRowKeys: [],
        selectedRows: [],
        materialType: 1,
        url: {
          list: "/ghSupplychainMaterialType/queryPageList"
        }
      }
    },
    created() {

    },
    mounted() {
      this.loadData();
    },
    methods: {
      callback(key) {
        this.materialType = key;
        this.loadData();
      },
      changeCostTypeValue(value) {
        //this.loadData()
      },
      searchQuery() {
        this.loadData(1);
      },
      searchReset() {
        this.queryParam = {};
        this.loadData(1);
      },
      handleCancel() {
        this.close();
      },
      handleOk() {
        if (this.selectedRows.length >= 1) {
          this.$emit('ok',this.selectedRows[0]);
          this.close();
        }else {
          this.$message.warning("请选择一条记录")
        }
      },
      add() {
        this.visible = true;
      },
      loadData(arg) {
        //加载数据 若传入参数1则加载第一页的内容
        this.loading = true;
        if (arg === 1) {
          this.ipagination.current = 1;
        }
        let params = this.getQueryParams();//查询条件
        params.materialType = this.materialType;
        getAction(this.url.list, params).then((res) => {
          if (res.success) {
            this.data = res.result || res.result.records;
            //this.ipagination.total = res.result.total;
          }
          this.loading = false;
        })
      },

      onSelectAll(selected, selectedRows, changeRows) {
        console.log("**************" + selected, selectedRows, changeRows);
      },
      onSelect(record, selected, selectedRows) {
      },
      onClearSelected() {
        this.selectedRowKeys = [];
        this.selectedRows = [];
      },
      onSelectChange(selectedRowKeys, selectionRows) {
        this.selectedRowKeys = selectedRowKeys
        this.selectedRows = selectionRows
      },
      close () {
        this.visible = false;
        this.onClearSelected();
        this.queryParam = {};
      },
    }
  }

  const bodystyle = {
    height: '1000px',
    overflow: 'hidden',
    overflowY: 'scroll',
  }
</script>

<style scoped>
  .ant-card-body .table-operator {
    margin-bottom: 18px;
  }

  .ant-table-tbody .ant-table-row td {
    padding-top: 15px;
    padding-bottom: 15px;
  }

  .anty-row-operator button {
    margin: 0 5px
  }

  .ant-btn-danger {
    background-color: #ffffff
  }

  .ant-modal-cust-warp {
    height: 100%
  }

  .ant-modal-cust-warp .ant-modal-body {
    height: calc(100% - 110px) !important;
    overflow-y: auto
  }

  .ant-modal-cust-warp .ant-modal-content {
    height: 90% !important;
    overflow-y: hidden
  }
</style>